<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="main.css" />
    <title>管理中心</title>
</head>

<body>
<h1 style="border-bottom: 1px solid #cccccc;padding-bottom: 10px"></h1>
<p>
    <a href="new.html">新建博客</a>
</p>
<div style="margin-bottom: 10px;">
    <input id="text-keyword">
    <botton id="btn-search">搜索</botton>
</div>
<table id="table-container">
    <tr>
        <th>博客标题</th>
        <th colspan="2">操作</th>
    </tr>
</table>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript">
    /*发送get请求*/
    function get(url) {
        return $.get(url);
    }

    /*发送post请求*/
    function post(url, data = {}) {
        return $.ajax({
            type: 'post',
            url,
            data: JSON.stringify(data),
            contentType: 'application/json'
        })
    }

    /*获取url参数*/
    function getUrlParams() {
        let paramStr = location.href.split('?')[1] || '';
        paramStr = paramStr.split('#')[0];
        const result = {};
        paramStr.split('&').forEach(itemStr => {
            const arr = itemStr.split('=');
            const key = arr[0];
            result[key] = arr[1];
        });
        return result;
    }

    /*获取dom元素*/
    const $textKeyword = $('#text-keyword');
    const $btnSearch = $('#btn-search');
    const $tableContainer = $('#table-container');

    /*拼接接口url*/
    let url = '/api/blog/list?isadmin=1'; // 增加一个 isadmin=1 的参数，使用登录者的用户名，后端也需要修改
    const urlParams = getUrlParams();
    if (urlParams.keyword) {
        url += '&keyword=' + urlParams.keyword;
    }

    /*加载数据*/
    get(url).then(res => {
        if (res.errno !== 0) {
            alert('数据错误');
            return;
        }
        /*显示数据*/
        const data = res.data || [];
        data.forEach(item => {
            $tableContainer.append($(`
                <tr>
                    <td>
                        <a href="detail.html?id=${item.id}" target="_blank">${item.title}</a>
                    </td>
                    <td>
                        <a href="edit.html?id=${item.id}">编辑</a>
                    </td>
                    <td>
                        <a data-id="${item.id}" class="item-delete">删除</a>
                    </td>
                </tr>
            `))
        })
    });

    /*搜索*/
    $btnSearch.click(() => {
        const keyword = $textKeyword.val();
        location.href = '/admin.html?keyword=' + keyword;
    });

    /*删除*/
    $tableContainer.click(e => {
        const $target = $(e.target);
        if ($target.hasClass('item-delete') === false) {
            return;
        }
        if (confirm('确定删除？')) {
            const url = '/api/blog/delete?id=' + $target.attr('data-id');
            post(url).then(res => {
                if (res.errno !== 0) {
                    alert('数据错误');
                    return;
                }
                location.reload();
            });
        }
    })
</script>
</body>

</html>